<template>
  <view class="ttbale">
    <view class="tcol fixed">
      <view class="th tcell">时间</view>
      <view :style="{height: `calc(${report.infoVoList.length*2}em + ${report.infoVoList.length-1}px)`}" class="tcell" v-for="(report, idx) in reports" :key="idx">
		{{ report.collectDay }}
	  </view>
    </view>
    <view class="tcol fixed">
      <view class="th tcell">水站名称</view>
      <view :style="{height: `calc(${report.infoVoList.length*2}em + ${report.infoVoList.length-1}px)`}" style="max-width: 4.5rem;" class="tcell" v-for="(report, idx) in reports" :key="idx">
        {{report.stationName}}</view>
    </view>
    <view class="tcol fixed">
		<view class="th tcell">水源类型</view>
		<view class="tcol">
			<block v-for="(report, idx) in reports" :key="idx">
				<view class="tcell" v-for="(item, idx) in report.infoVoList" :key="item">
					{{WATER_TYPES[item.type]}}
				</view>
			</block>
		</view>
	</view>
	<view class="tcol scale">
		<view class="th tcell">浊度(NTU)</view>
		<view class="tcol">
			<block v-for="(report, idx) in reports" :key="idx">
				<block v-for="(info, idx2) in report.infoVoList" :key="idx2">
					<view class="tcell">
						{{info.density.toFixed(2)}}
					</view>
				</block>
			</block>
		</view>
	</view>
	<view class="tcol scale">
		<view class="th tcell">COD (ppm)</view>
		<view class="tcol">
			<block v-for="(report, idx) in reports" :key="idx">
				<block v-for="(info, idx2) in report.infoVoList" :key="idx2">
					<view class="tcell">
						{{info.cod.toFixed(2)}}
					</view>
				</block>
			</block>
		</view>
	</view>
	<view class="tcol scale">
		<view class="th tcell">TDS (ppm)</view>
		<view class="tcol">
			<block v-for="(report, idx) in reports" :key="idx">
				<block v-for="(info, idx2) in report.infoVoList" :key="idx2">
					<view class="tcell">
						{{info.tds.toFixed(2)}}
					</view>
				</block>
			</block>
		</view>
	</view>
  </view>
</template>

<script>
	import {WATER_TYPES} from '../../static/constants.js'
const app = getApp();
export default {
  onLoad(opts) {
    uni.request({
      header: {
        Authorization: "Bearer " + app.globalData.token,
      },
      url: app.globalData.adurl + "stationQualityCollect/build",
      method: "GET",
      data: {},
      success: (res) => {
        const { data } = res;
        if (data.code == 200) {
          this.reports=data.data;
        } else if (data.code == 500) {
          uni.showToast({
            icon: "none",
            title: data.messagem,
          });
        }
      },
      fail: (err) => {
        console.error(err);
      },
      complete: () => {},
    });
  },
  data() {
    return {
      reports: [],
			WATER_TYPES,
    };
  },
};
</script>

<style>
page {
  padding: 0 !important;
}

.ttbale {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;


  font-size: 24rpx;
}

.head,
.th {
  font-weight: bold;
  height: 4em!important;
  background-color: lightgray;
}

.trow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}

.tcol {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}

/* 单元格 */
.tcell {
	min-height:max-content;
	
	box-sizing: border-box;
	
  /* 居中 */
  text-align: center;
  vertical-align: middle;
  
  line-height: 2em;

  /* 换行 */
  overflow-y: visible;
  overflow-wrap: break-word;
  word-break: break-all;

  /* 边框 */
  border: solid 1px gray;

  /* 内边距 */
  padding: 0 0.3em;

  /* 边框合并 */
  margin-right: -1px;
  margin-bottom: -1px;
  
  /* flex布局 */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
}

.scale {
  flex-grow: 1;
  flex-shrink: 1;
}

.fixed {
  min-width: max-content;
  max-width: max-content;
  width: max-content;
  flex-wrap: 0;
  flex-grow: 0;
}
</style>
